<!-- 使用方法
<ZYCardLine v-for="(bItem, bIndex) in _d.list" :key="bIndex" :columns="_d.columns" :row="bItem" :index="bIndex">
	<template #name>
		<el-text class="cursor-pointer text-line-2" type="primary" @click="_d.click(bItem)">{{bItem.name}}</el-text>
	</template>
	<template #status>
		<el-tag type="primary">测试一下</el-tag>
	</template>
</ZYCardLine>


const _d = reactive({
	columns: [
		{width: '40px', format: (row, index) => {
			return index+1;
		}},
		{class: "flex-1 w-0", slot: 'name'},
		{width: '100px', format: (row, index) => '项目类型'},
		{width: '100px', prop: 'leaderName'},
		{width: '100px', slot: 'status'},
		{width: '170px', format: row => row.planStartDate+' 至 '+row.planEndDate},
		{width: '70px', format: row => '逾期4天'}
	],
	list: [],
	click: row => {console.log(row)}},
})

-->
<template>
	<div class="card-line-wp">
		<div v-for="(aItem, aIndex) in columns" :key="aIndex"
			:class="aItem.class"
			:style="{
				...aItem.style,
				width: aItem.width,
				minWidth: aItem.minWidth
			}">
			<template v-if="!aItem.slot">{{getText(aItem)}}</template>
			<slot v-else :name="aItem.slot" :row="row" :index="index"></slot>
		</div>
	</div>
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue';

const props = defineProps({
	columns: {
		type: Array,
		default: () => ([])
	},
	row: {
		type: Object,
		default: () => ({})
	},
	index: {
		type: Number,
		default: 0
	}
})

onMounted(() => {
	
})

// 获取内容
const getText = (item) => {
	if(item.format) {
		return item.format(props.row, props.index);
	} else if (item.prop) {
		return props.row[item.prop];
	}
	return '';
}

</script>
<style lang="scss" scoped>
.card-line-wp {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	line-height: 18px;
	padding: 0 5px;
	&:not(:last-child) {
		border-bottom: 1px solid #F3F4F5;
	}
}
</style>